<template>
	<view class="system-messages">
		<template v-for="item in dataList" :key="item.id">
			<view class="message__wrap" :class="{ 'read-it': Number(item.status) === 1 }"
				@tap="handleReadMessage(item)">
				<up-badge is-dot :show="Number(item.status) === 0" absolute :offset="['32rpx','24rpx']"></up-badge>
				<view class="message__header">
					<text class="message__header-title up-line-1">{{ item.type }}</text>
				</view>
				<view class="message__body">
					<view class="message__content" v-html="item.content"></view>
				</view>
				<up-line margin="28rpx 0" color="#08121E" hairline></up-line>
				<view class="message__footer">
					<text class="message__time">{{ item.createTime }}</text>
				</view>
			</view>
		</template>
		<empty v-if="isEmpty"></empty>
		<up-loadmore v-else marginTop="24" :status="loadMoreStatus" :nomore-text="$t('network.noDataOfMore')"
			:loading-text="$t('common.loadingText')" color="#9e9e9e" lineColor="#9e9e9e" dashed
			:line="loadMoreStatus == 'nomore'" />
	</view>
</template>

<script setup>
	import useRefreshablePagination from "@/composable/hooks/useRefreshablePagination.js";
	import apis from "@/apis";
	import {
		useAppStore
	} from "@/store/app";
	const store = useAppStore();

	const fetchData = async (page, pageSize) => {
		const data = await apis.getSystemMessage(page, pageSize).then(res => res?.data?.records || []);
		return {
			data
		};
	};

	const handleReadMessage = async item => {
		if (Number(item.status) === 0) {
			try {
				item.status = 1;
				await store.readSysMsg(item.id);
			} catch (error) {
				item.status = 0;
			}
		}
	}

	const {
		dataList,
		isEmpty,
		loadMoreStatus
	} = useRefreshablePagination(fetchData);
</script>

<style lang="scss" scoped>
	.system-messages {
		padding: 24rpx 32rpx;
	}

	.message {
		&__wrap {
			position: relative;
			padding: 32rpx 24rpx 28rpx;
			background-color: #132034;
			border-radius: 16rpx;

			&:not(:last-child) {
				margin-bottom: 32rpx;
			}

			&.read-it {
				.message__header-title {
					color: rgba(248, 248, 248, 0.6)
				}

				.message__content {
					color: rgba(174, 174, 174, 0.6)
				}
			}
		}

		&__header {
			@include flex(row);
			align-items: center;
			justify-content: space-between;

			&-title {
				// font-family: PingFangSC;
				font-size: 32rpx;
				line-height: 1;
				color: #F8F8F8;
			}
		}

		&__body {
			margin-top: 30rpx;
			// font-family: PingFangSC;
			font-size: 28rpx;
		}

		&__content {
			color: #AEAEAE;
			white-space: pre-line;
		}

		&__footer {
			@include flex(row);
			align-items: center;
			justify-content: space-between;
		}

		&__time {
			// font-family: PingFangSC;
			font-size: 24rpx;
			line-height: 1;
			color: #808080;
		}
	}
</style>